<template>
	<div class="wnd-main col" @contextmenu.prevent="">
		<toolsbar></toolsbar>
		<div class="row">
			<sidebar></sidebar>
			<div class="wnd-content row "  @click="Vue.menu.hide()"  tabIndex=-1				
				@keydown.ctrl.c.self="onCopyKey" @keydown.ctrl.x.self= "onCutKey" @keydown.ctrl.v.self="onPasteKey" @keydown.113.self="onRenameKey"
				@keydown.self.enter='onEnterKey' @keydown.delete.self="onDeleteKey(event)" @click.right.stop="onRightClick" 
				@mousedown.left.self="onMouseDownLeft" @mousemove.left="onMoseMoveLeft" @mouseup.left="onMouseUp"
				@mousemove="onMouseMove"
				>
				
				<file :file="item" v-if=" item.data.basename.toLowerCase().indexOf(w.files.filter.toLowerCase()) > -1" v-for="item in w.files.list" :key='item.id'></file>
				<div class="wnd-srect" v-show="srect.mousedown" :style="{left:srect.left + 'px',top:srect.top + 'px',width:srect.width + 'px',height:srect.height+'px' }"></div>
			</div>
		</div>
		<footbar></footbar>
		<contextmenu></contextmenu>
		<uploader></uploader>
		<dialogs :options='item' v-for="item in w.dialogs.list" :key='item.id'></dialogs>
	</div>
</template>

<script>
	{
		name: 'wnd',
		data: function() {
			return {
				w: wnds,				
				srect: {
					mousedown: false,
					left: 0,
					top: 0,
					width: 0,
					height: 0
				},
				firstPos: {
					x: 0,
					y: 0
				}
			}
		},
		methods: {
			onRenameKey:function(){
				wnds.defaultOptions.rename.onClicked()
			},
			onPasteKey:function(){
				wnds.defaultOptions.paste.onClicked()
			},
			onCutKey:function(e){
				wnds.defaultOptions.cut.onClicked()
			},
			onCopyKey:function(e){
				wnds.defaultOptions.copy.onClicked()
			},
			onEnterKey:function(e){
				wnds.defaultOptions.glob.onClicked()
			},
			//删除选中
			onDeleteKey:function(e){
				gnp.post('php/delete.php',{list:wnds.getFileDatas(wnds.selector.list)}).then(function(r){
					wnds.files.reload()
				})
			},
		
			onRightClick: function(e) {
				e.preventDefault()
				var op = []
				var dop = this.w.defaultOptions
				if(this.w.selector.list.length == 0) { //未选择文件
					op = [dop.newfolder]
					if(this.w.clip.list.length > 0){ //剪贴有数据						
						op.push(dop.sp)
						op.push(dop.paste)
					}
					Vue.menu.show(e, op)					
				} else if(this.w.selector.list.length > 0) { //有选中的文件
					if(wnds.selector.list.length == 1){ //只有一个
						op.push(dop.glob)
						op.push(dop.qrcode)
					}					
//					op.push(dop.newfolder)
					if(wnds.selector.list.length == 1){ 
						op.push(dop.rename)
					}
					op.push(dop.sp)
					op.push(dop.copy)
					op.push(dop.cut)
					if(this.w.clip.list.length > 0){
						op.push(dop.paste)
					}
					op.push(dop.sp)
					op.push(dop.del)
					op.push(dop.sp)
					op.push(dop.download)
					op.push(dop.zip)						
					
					if(wnds.selector.list.length == 1 && wnds.selector.list[0].data.extension && wnds.selector.list[0].data.extension == 'zip'){
						op.push(dop.unzip)
						if(this.w.clip.list.length > 0){
							op.push(dop.paste)
						}
					}					
				}				
				
				if(op.length > 0){
					Vue.menu.show(e, op)
				}
			},
			onMouseDownLeft: function(ev) {
				if(!ev.ctrlKey) {
					this.w.selector.clear()
				}
				//框选区域
				this.firstPos.x = ev.clientX
				this.firstPos.y = ev.clientY

				this.srect.mousedown = true
			},
			onMoseMoveLeft: function(ev) {				
				if(this.srect.mousedown) {

					var x = ev.clientX
					var y = ev.clientY
					var x1 = this.firstPos.x
					var y1 = this.firstPos.y

					this.srect.width = x >= x1 ? x - x1 - 5 : x1 - x
					this.srect.left = x >= x1 ? x1 : x + 3
					this.srect.height = y >= y1 ? y - y1 - 3 : y1 - y
					this.srect.top = y >= y1 ? y1 : y + 3

					this.checkcross(function(file) {
						file.isSelected = {
							value: true
						}
					}, function(file) {
						file.isSelected = {
							value: false
						}
					})
				}
			},
			onMouseMove:function(ev){
				if(ev.buttons ==0 && this.srect.mousedown){
					this.srect = {
						mousedown: false,
						left: 0,
						top: 0,
						width: 0,
						height: 0
					}
					this.w.files.list.forEach(function(file){
						file.isSelected = false
					})
				}
			},
			onMouseUp: function(ev) {
				if(this.srect.mousedown) {
					var that = this
					this.checkcross(function(file) {
						that.w.selector.addin(file)
					})

					this.srect = {
						mousedown: false,
						left: 0,
						top: 0,
						width: 0,
						height: 0
					}
				}
			},
			checkcross: function(cb, cb1) {
				var that = this
				this.w.files.list.forEach(function(file) {
					if(that.cross(that.srect, file.el.getBoundingClientRect())) {
						cb(file)
					} else {
						cb1 && cb1(file)
					}
				})
			},
			cross: function(a, b) {
				var xm = (Math.max(a.left, b.left) <= Math.min(a.left + a.width, b.right))
				var ym = (Math.max(a.top, b.top) <= Math.min(a.top + a.height, b.bottom))
				return(xm && ym)
			}
		},
		created: function() {
			Vue.nextTick(function(){
					
			})			
		},
		components: [
			'components/toolsbar',
			'components/file',
			'components/sidebar',
			'components/footbar',
			'components/contextmenu',
			'components/uploader',
			'components/dialogs'
		]
	}
</script>

<style>
	.wnd-main {
		position: fixed;
		width: 100%;
		height: 100%;
		margin: 0;
		justify-content: flex-start;
		border-radius: 5px;
		border-style: solid;
		border-width: thin;
		border-color: #D2D7DC;
		background-color: #F5F5F5;
	}
	
	.wnd-title-bar {
		height: 30px;
		background-color: #E0E0DC;
		align-items: center;
		border-bottom: #404040;
		border-bottom-style: solid;
		border-bottom-width: thin;
		justify-content: flex-start;
	}
	
	.wnd-title-img {
		width: 16px;
		height: 16px;
		margin-left: 5px;
	}
	
	.wnd-title-text {
		font-size: small;
		margin-left: 15px;
		background-color: rgba(0, 0, 0, 0);
		text-shadow: 0.5px 0.5px 0.5px #333333;
	}
	
	.wnd-content {
		justify-content: flex-start;
		align-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		overflow-y: scroll;
		border: #D2D7DC thin solid;
		margin: 0 5px 2px 0;
		border-radius: 5px;
		background-color: white;
		outline:none;
	}
	
	.wnd-srect {
		position: absolute;
		border: solid;
		border-color: lightblue;
		background: rgba(0, 0, 100, 0.1);
	}
	
	.wnd-fullscreen {
		width: auto;
	}
	
	.wnd-fullscreen>img {
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}
</style>